<template>
  <div>
    <el-form :inline="true" :model="model" :rules="rules" ref="ruleForm"  label-width="120px" class="demo-ruleForm" v-if="showType==='from'">
      <el-form-item label="开始治疗时间" prop="startTime">
        <el-date-picker v-model="model.startTime" type="date" placeholder="选择开始治疗时间" class="width220" value-format="yyyy-MM-dd" value="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item label="治疗次数" prop="treatmentTimes">
         <el-input-number v-model="model.treatmentTimes" controls-position="right" :min="1" placeholder="治疗次数"   class="width220"></el-input-number>
      </el-form-item>
      <el-form-item label="治疗方式" prop="treatmentType">
        <el-select v-model="model.treatmentType" placeholder="请选择治疗方式" class="width220" @change="changeTreatmentType">
          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="治疗耗时" prop="useTime">
        <el-input v-model="model.useTime" placeholder="请输入治疗耗时" class="width220" disabled><template slot="append">分钟</template></el-input>
      </el-form-item>
      <el-form-item label="治疗间隔时间" prop="intervalDays">
        <el-input v-model="model.intervalDays" placeholder="请输入治疗间隔时间" class="width220"><template slot="append" >天</template></el-input>
      </el-form-item>
      
       <el-form-item  class="form-item-block text-center">
          <el-button type="primary"  @click="createCourse">提交</el-button>
       </el-form-item>
    </el-form>
    <div  v-if="showType==='table'">
      <el-table :data="list"  border class="mt-1"  :row-class-name="tableRowClassName">
        <el-table-column  prop="treatmentTimes" width="50" label="次数" align="center"/>
        <el-table-column prop="" label="计划治疗日期" min-width="120"  align="center">
         <template slot-scope="scope">
            <div>{{timestampToTime(scope.row.planTreatmentTime,'yyyy-mm-dd hh:mm')}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="treatmentTypeName.name" label="治疗类型"  min-width="120"  align="center"/>
        <el-table-column prop="treatmentUseTime" label="预计耗时(分钟)"  width="120"  align="center"/>
        <el-table-column  label="分配机器" min-width="120">
          <template slot-scope="scope">
            <div>{{scope.row.planMachineName.name}}</div>
          </template>
        </el-table-column>
         <el-table-column prop="sort" label="序号" width="50" align="center"/>
        <el-table-column prop="remark" label="备注" min-width="120"/>
        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="showDialog(scope.row)">编辑</el-button>
            <el-popover placement="bottom" title="当日治疗计划详情" width="1000" trigger="click">
              <el-table  :data="popoverDate"  border class="mt-1">
                <el-table-column  prop="provider.name" width="80" label="客户" align="center"/>
                <el-table-column  prop="treatmentPeriod" width="50" label="疗程" align="center"/>
                <el-table-column  prop="treatmentTimes" width="50" label="次数" align="center"/>
                <el-table-column prop="" label="计划治疗日期" min-width="120"  align="center">
                <template slot-scope="scope">
                    <div>{{timestampToTime(scope.row.planTreatmentTime,'yyyy-mm-dd hh:mm')}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="treatmentTypeName.name" label="治疗类型"  min-width="120"  align="center"/>
                <el-table-column prop="treatmentUseTime" label="预计耗时(分钟)"  width="120"  align="center"/>
                <el-table-column  label="分配机器"  width="100">
                  <template slot-scope="scope">
                    <div>{{scope.row.planMachineName.name}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="sort" label="序号" width="50" align="center"/>
                <el-table-column label="状态"  align="center">
                  <template slot-scope="scope">
                    <el-tag type="info" v-if="scope.row.state===1">已做</el-tag>
                    <el-tag type="waring" v-if="scope.row.state===0">未做</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" min-width="120"/>
                <!-- <el-table-column label="操作"  align="center">
                  <template slot-scope="scope">
                    <el-button type="text" @click="showDialog(scope.row)">修改</el-button>
                  </template>
                </el-table-column> -->
              </el-table>
              <el-button slot="reference" type="text"   @click="showDetail(scope.row)">当日计划</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div class="text-center mt-2"><el-button type="primary"  @click="submitCourse">生成疗程计划</el-button></div>
    </div>
    <el-dialog :title="dialog.title" :visible.sync="dialog.open" width="1000" top="70px" :close-on-click-modal="false" class="bodyNopaddingTop">
       <el-form :inline="true" :model="dialog.formData"   label-width="120px" class="demo-ruleForm">
      <el-form-item label="治疗时间" prop="planTreatmentTime">
        <el-date-picker v-model="dialog.formData.planTreatmentTime" type="datetime" placeholder="选择治疗时间" class="width220" value-format="yyyy-MM-dd hh:mm:ss" value="yyyy-MM-dd hh:mm"/>
      </el-form-item>
      <el-form-item label="治疗方式" prop="treatmentType">
        <el-select v-model="dialog.formData.treatmentType" placeholder="请选择治疗方式" class="width220" @change="changeTreatmentType1">
          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="治疗耗时" prop="useTime">
        <el-input v-model="dialog.formData.useTime" placeholder="请输入治疗耗时" class="width220" disabled><template slot="append">分钟</template></el-input>
      </el-form-item>
       <el-form-item  class="form-item-block text-center">
          <el-button type="primary"  @click="submitPlan">提交</el-button>
       </el-form-item>
    </el-form>
  </el-dialog>
  </div>
</template>
<script>
import {planCourseTreatment,submitCourseTreatmentList,courseTreatmentPlanUpdate, getlanTreatmentDetail} from "plugins/axios/inquiryRecord.js"
// 治疗计划form表单
import treatmentPlanForm from 'views/operationManage/components/inquiryRecordDetail/treatmentPlan/treatmentPlanForm.vue';
// 治疗计划列表
import treatmentTable from 'views/operationManage/components/inquiryRecordDetail/treatmentPlan/treatmentTable.vue';
export default {
  components:{
    treatmentPlanForm,
    treatmentTable
  },
  props:{
    treatmentPeriod:{
      type:[String,Number]
    },
    typeList:{
      type:Array,
      default(){
        return []
      }
    },
    providerId:{
      type:[String,Number]
    },
    model:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data(){
    return {
      list:[],
      showType:'from',
      visible:false,
      rules:{
        startTime:[{required: true, message: '请输入开始治疗时间', trigger: 'blur' }],
        treatmentTimes:[{required: true, message: '请输入治疗次数', trigger: 'blur' }],
        treatmentType:[{required: true, message: '请选择治疗方式', trigger: 'blur' }],
        intervalDays:[{required: true, message: '请输入治疗间隔时间', trigger: 'blur' }]
      },
      dialog:{
        title:'',
        open:false,
        formData:{}
      },
      popoverDate:[]
    }
  },
  created(){},
  mounted(){},
  watch:{},
  computed:{},
  methods:{
    init(){
      this.showType='from';
      this.dialog.formData={};
    },
    createCourse(){
      let self = this,
      postData={
        ...self.model,
        providerNo:self.providerId
      }
      self.$refs.ruleForm.validate((valid) => {
        if (valid) {
          planCourseTreatment(postData).then(res=>{
            self.showType ='table'
            self.list=res.content;
          })
        }
      })
    },
    submitCourse(){
      let self = this;
      submitCourseTreatmentList(self.list).then(res=>{
         self.$message.success(`疗程创建成功！`);
         self.$emit('submitSuccess')
      })
    },
    changeTreatmentType(val){
     this.typeList.forEach(item=>{
       if(item.id===val){
         this.model.useTime=item.time
       }
     })
    },
    changeTreatmentType1(val){
      this.typeList.forEach(item=>{
       if(item.id===val){
         this.dialog.formData.useTime=item.time
       }
     })
    },
    tableRowClassName({row, rowIndex}){
      if(row.maxTreatment<=row.presentTreatment){
        return 'danger-row'
      }
    },
    showDialog(row){
      this.dialog.open=true;
      this.dialog.title = "修改计划";
      this.dialog.formData={...row}
    },
    submitPlan(){
      let self = this,postData={...this.dialog.formData};
      let  list=self.list.map(item=>{
        if(item.treatmentTimes===postData.treatmentTimes){
          return postData
        }
        return item
      })
      courseTreatmentPlanUpdate(list).then(res=>{
        self.$message.success("修改成功");
        self.list=res.content;
        self.dialog.open=false
      }) 
    },
    showDetail(row){
      let self = this;
      self.popoverDate=[];
      getlanTreatmentDetail({date:row.planTreatmentDate}).then(res=>{
        self.popoverDate=[...res.content]
      })
    }
    
  }
}
</script>
<style scoped>
</style>